<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.0.js"></script>

<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.1.1-dist/css/bootstrap.css">

<script src="slider/js/bootstrap-slider.js"></script>
<link rel="stylesheet" href="slider/css/slider.css">
<script src="script-bootstrap.js"></script>

<link rel="stylesheet" href="style-bootstrap.css">

<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="calc_pane">
		<div id="steps">
			<div id="step-1" class="step">
				<div class="steps-canvas">
					<div class="line-1">
						<div id="window_type">
							<h4>Тип оконной конструкции</h4>
							<div id="window_type_canvas">
								<img id="window_type_canvas_img"
									src="images/1stvorki_1povorot.png" />
							</div>
							<!-- Start modal -->
							<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
								aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal"
												aria-hidden="true">&times;</button>
											<h4 class="modal-title" id="myModalLabel">Выберите тип
												окна</h4>
										</div>
										<div class="modal-body">
											<div class="style_block" id="one_panel">
												<img src="images/1stvorki_1povorot.png" /> <img
													src="images/1stvorki_gluhoe.png" />
											</div>
											<div class="style_block" id="two_panel">
												<img src="images/2stvorki_gluhoe.png" /> <img
													src="images/2stvorki_1povorot.png" /> <img
													src="images/2stvorki_2povorot.png" />
											</div>
											<div class="style_block" id="three_panel">
												<img src="images/3stvorki_gluhoe.png" /> <img
													src="images/3stvorki_1povorot.png" /> <img
													src="images/3stvorki_2povorot.png" /> <img
													src="images/3stvorki_3povorot.png" />
											</div>
											<div class="style_block" id="door">
												<img src="images/balcon.png" />
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- End modal -->
						</div>

					</div>
					<div id="window_wrap">
						<div id="vertical_slider_wrap">
							<div id="vmax">1500</div>
							<input type="text" name="window_height" value="" size="1"
								id="window_height" />
							<div id="vertical_slider"></div>
							<div id="vmin">500</div>

						</div>
						<div id="window_canvas">
							<!-- <img src="images/window_2_fixed.png" /> -->
							<img src="images/window_2_fixed_2.png" />
						</div>
						<div id="horizontal_slider_wrap">
							<div style="float: left" class="horizontal-min hlimit">500</div>
							<div style="float: left; width: 250px">
								<div id="horizontal_slider"></div>
							</div>
							<div style="float: left" class="horizontal-max hlimit">1500</div>


							<input type="text" name="window_width" value="" id="window_width"
								size="1" />
						</div>
					</div>
					<div id="params_wrap">
						<!-- <div style="display: none">
							<h4>Профильная система</h4>
							<div id="window_profile_canvas"></div>

							Start modal
							<div class="modal fade" id="profileModal" tabindex="-1"
								role="dialog" aria-labelledby="profileModalLabel"
								aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal"
												aria-hidden="true">&times;</button>
											<h4 class="modal-title" id="myModalLabel">Выберите
												профиль</h4>
										</div>
										<div class="modal-body">
											<div class="item-table">
												<div class="item-row">
													<div class="profile-item">
														<img src="images/profile/x.jpg" />
														<p>НЕТ</p>
													</div>
													<div class="profile-item">
														<img src="images/profile/eco_60.jpg" />
														<p>ECO 60</p>
													</div>
													<div class="profile-item">
														<img src="images/profile/forwin.jpg" />
														<p>FORWIN</p>
													</div>
												</div>
												<div class="item-row">
													<div class="profile-item">
														<img src="images/profile/goodwin.jpg" />
														<p>GOODWIN</p>
													</div>
													<div class="profile-item">
														<img src="images/profile/nord_70.jpg" />
														<p>NORD 70</p>
													</div>
													<div class="profile-item">
														<img src="images/profile/quadro_70.jpg" />
														<p>QUADRO 70</p>
													</div>
												</div>
												<div class="item-row">
													<div class="profile-item">
														<img src="images/profile/reachmont.jpg" />
														<p>REACHMONT</p>
													</div>
													<div class="profile-item">
														<img src="images/profile/reachmont_eco.jpg" />
														<p>REACHMONT ECO</p>
													</div>
													<div class="profile-item">
														<img src="images/profile/termo.jpg" />
														<p>TERMO</p>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							End modal

						</div> -->
						<div>
							<h4>Поворотно-откидной механизм открывания окна</h4>
							<div class="btn-group" data-toggle="buttons">
								<label class="btn"><input type="radio" id="yes"
									name="mech">Да</label> <label class="btn"><input
									type="radio" id="no" name="mech" checked="checked">Нет</label>
							</div>
						</div>
						<div>
							<h4 class="laminat-h4">Ламинация</h4>
							<div id="laminat_canvas">
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
								<div class="laminat_item"></div>
							</div>
							<!--  <div class="clr_bth"></div>-->
						</div>

					</div>
				</div>
				<div class="clr_bth">
					<a id="button-step-2" class="button-step button-step-next">Далее</a>
					<div style="clear: both"></div>
				</div>
			</div>

			<div id="step-2" class="step">
				<div class="steps-canvas">
					<h3 align="center">Выберите профильную систему</h3>
					<div class="item-table">
						<div class="item-row">
							<div class="profile-item">
								<img src="images/profile/eco_60.jpg" />
								<p>ECO 60</p>
								<!-- 								<span data-toggle="tooltip" data-placement="top" title="Тепло"
									class="tooltiptest"><span
									class="glyphicon glyphicon-asterisk"></span></span> <span
									data-toggle="tooltip" data-placement="top" title="Тихо"
									class="tooltiptest"> <span
									class="glyphicon glyphicon-volume-off"></span></span> <span
									class="glyphicon glyphicon-usd"></span> <span
									class="glyphicon glyphicon-usd"></span> <span
									class="glyphicon glyphicon-usd"></span> <span class=""></span>
								<span class=""></span> <span class=""></span> -->
							</div>
							<div class="profile-item">
								<img src="images/profile/forwin.jpg" />
								<p>FORWIN</p>
							</div>
							<div class="profile-item">
								<img src="images/profile/goodwin.jpg" />
								<p>GOODWIN</p>
							</div>
							<div class="profile-item">
								<img src="images/profile/nord_70.jpg" />
								<p>NORD 70</p>
							</div>
						</div>
						<div class="item-row">
							<div class="profile-item">
								<img src="images/profile/quadro_70.jpg" />
								<p>QUADRO 70</p>
							</div>
							<div class="profile-item">
								<img src="images/profile/reachmont.jpg" />
								<p>REACHMONT</p>
							</div>
							<div class="profile-item">
								<img src="images/profile/reachmont_eco.jpg" />
								<p>REACHMONT ECO</p>
							</div>
							<div class="profile-item">
								<img src="images/profile/termo.jpg" />
								<p>TERMO</p>
							</div>
						</div>
					</div>
				</div>
				<div class="clr_bth">
					<a id="button-step-1" style="float: left"
						class="button-step button-step-prev">Назад</a> <a
						id="button-step-3" style="float: right; display: none"
						class="button-step button-step-next">Далее</a>
					<div style="clear: both"></div>


				</div>

			</div>
			<div id="step-3" class="step">
				<div class="steps-canvas">
					<h3 align="center">Дополнительные опции</h3>
					<div class="options-div">
						<h5>Тип ручки</h5>
						<div class="btn-group-vertical btn-group-xs" data-toggle="buttons">
							<label class="btn btn-default  active"> <input type="radio"
								name="options" id="option1" checked="checked"> Белая
							</label> <label class="btn btn-default"> <input type="radio"
								name="options" id="option2"> Цветная
							</label> <label class="btn btn-default"> <input type="radio"
								name="options" id="option3"> Ручка с замком
							</label>
						</div>
					</div>
					<div class="options-div">
						<h5>Дополнительно</h5>

						<div class="btn-group-vertical btn-group-xs" data-toggle="buttons">
							<label class="btn btn btn-default"> <input
								type="checkbox"> Пятиступенчатый проветриватель
							</label> <label class="btn btn-default"> <input type="checkbox">
								Гребенка
							</label> <label class="btn btn-default"> <input type="checkbox">
								Клапан-проветриватель
							</label> </label> <label class="btn btn-default"> <input type="checkbox">
								Москитная сетка
							</label>
						</div>
					</div>
					<div class="options-div">
						<h5>Тип дома</h5>
						<div class="btn-group-vertical btn-group-xs" data-toggle="buttons">
							<label class="btn btn-default active"> <input type="radio"
								name="options" id="option1"checked="checked"> Без монтажа
							</label> <label class="btn btn-default"> <input type="radio"
								name="options" id="option1"> Кипричный
							</label> <label class="btn btn-default"> <input type="radio"
								name="options" id="option2"> Панельный
							</label> <label class="btn btn-default"> <input type="radio"
								name="options" id="option3"> Деревянный
							</label>
						</div>
					</div>



					<div class="options-div">
						<h5>Подоконник</h5>
						<div class="btn-group-vertical btn-group-xs" data-toggle="buttons">
							<label class="btn btn-default active"> <input type="radio"
								name="options" id="option1" checked="checked"> Нет
							</label> <label class="btn btn-default"> <input type="radio"
								name="options" id="option1"> ПВХ-белый (Германия)
							</label> <label class="btn btn-default"> <input type="radio"
								name="options" id="option2"> ПВХ-белый (Россия)
							</label> <label class="btn btn-default"> <input type="radio"
								name="options" id="option3"> ПВХ-цветной (Россия)
							</label> <label class="btn btn-default"> <input type="radio"
								name="options" id="option1"> ПВХ-белый с акриловым <br />покрытием
								(Россия)
							</label> <label class="btn btn-default"> <input type="radio"
								name="options" id="option2"> ПВХ CRYSTALIT (Россия)
							</label> <label class="btn btn-default"> <input type="radio"
								name="options" id="option3"> ПВХ-цветной (Россия)
							</label>
						</div>
					</div>
					<div class="options-div">
						<h5></h5>
					</div>
					<div class="options-div">
						<h5></h5>
					</div>
					<div class="options-div">
						<h5></h5>
					</div>
				</div>
				<div class="clr_bth">
					<a id="button-step-2" style="float: left"
						class="button-step button-step-prev">Назад</a> <a
						id="button-step-4" style="float: right;"
						class="button-step button-step-next">Далее</a>
					<div style="clear: both"></div>

				</div>
			</div>
			<div id="step-4" class="step">
				<div class="steps-canvas"></div>
				<div class="clr_bth">
					<a id="button-step-2" style="float: left"
						class="button-step button-step-prev">Назад</a> <!-- <a
						id="button-step-4" style="float: right;"
						class="button-step button-step-next">Далее</a> -->
					<div style="clear: both"></div>

				</div>
			</div>

		</div>
</body>
</html>
